<template>
    <div class='content'>

        <section>
            <div class="profile_page">
                    <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
            </div>
            <!--<div class="my_backlog" >-->
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :offset="offset"
              >
                <div  v-for="item in remainData">

                <van-cell :id="item.id" :textMsg="item.remMsg" @click.stop="readMsg($event)" :title="item.remMsg" is-link :value="item.remDate.substring(0,10)"  :key="item.id"/>
                </div>
              </van-list>
        </section>
    </div>
</template>

<script>
    import headTop from '@/components/header/head';
    import {queryMessageList,messageRead,lookMessageDetail} from '@/service/getData';
    import {getStore} from '@/assets/config/mUtils';
    import { Dialog,Toast } from 'vant';
    export default {
    	data(){
            return{
                profiletitle:'我的消息',
                goBack:true,
                CHECK_TIME: new Date().getTime().toString(),
                app_userId:'',
                remainData:[],
                loading: false,
                finished: false,
                pageIndex:0,
                offset: 0,
            }
        },
        created(){
    	    this.app_userId = getStore('user_id');
        },
        mounted(){


        },
        props: ['imgSrc', 'menuTitle'],
        components:{
            headTop,
        },
        methods:{
          onLoad(){
            var data ={};
            data.personId = this.app_userId;
            data.app_userId = this.app_userId;
            data.CHECK_TIME = this.CHECK_TIME;
            data.CHECK_SIGN = this.$md5(this.app_userId + this.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
            data.pageIndex = this.pageIndex;
            data.type = '2';
            data.status = '1';
            data.pageSize = 16;
            queryMessageList(data).then(res=>{
              // 加载状态结束
              this.loading = false;
              this.offset = 16 * this.pageIndex;
              if(res.data.data.length){
                this.remainData.push(...res.data.data);
              }else {
                this.finished = true;
              }
            });
            this.pageIndex+=1;
          },
          readMsg(event){
            var msgId = event.currentTarget.getAttribute("id");
            var textMsg = event.currentTarget.getAttribute("textMsg");
            var data = {};
            data.id=msgId;
	          lookMessageDetail(data).then(res=>{
		          console.log(res);
		          var title = res.data.title ||'消息'
		          Dialog.alert({
			          title:title,
			          message: res.data.messageContent
		          }).then(() => {
			          var data ={};
			          data.id = msgId;
			          data.app_userId = this.app_userId;
			          data.CHECK_TIME = this.CHECK_TIME;
			          data.CHECK_SIGN = this.$md5(this.app_userId + this.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
			          messageRead(data).then(res=>{
				          this.remainData = [];
				          this.pageIndex = 0;
				          this.finished = false;
				          this.onLoad();
			          })
		          });
	          });

          }
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
      @import '../../assets/style/public';
      .van-icon {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }
    .van-icon-arrow{
        transform:rotate(-90deg);
        &:before{
                content: "\e634";
            }
    }
    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }
    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
    .van-cell{
      height: 1.7rem;
    }

    .van-cell__title{
      flex: inherit;
      width: 10rem;
      overflow: hidden;
      span{
        height: 1rem;
        display: inline-block;
        font-size: .48rem;
      }
    }
    @media screen and (device-width: 320px) and (-webkit-device-pixel-ratio: 2){
      .van-cell{
        height: 2rem;
      }
      .van-cell__title{
        flex: inherit;
        width: 9rem;
        overflow: hidden;
        span{
          height: 1rem;
          display: inline-block;
          font-size: .48rem;
        }
      }
    }
</style>
